<!--
 * @Description: ""
 * @Autor: Bingo
 * @Date: 2024-08-15 16:54:49
 * @LastEditors: Bingo
 * @LastEditTime: 2024-09-02 14:11:41
-->
<template>
  <div class="table-container">
    <!-- 移动端显示卡片样式 -->
    <div class="mobile-list-box" v-if="IS_MOBILE">
      <div class="card-box" v-for="boxItem in mobileShowList" :key="boxItem">
        <div class="card-item" v-for="cardItem in boxItem" :key="cardItem">
          <aside class="card-item-label">{{ cardItem.label }}</aside>
          <aside class="card-item-value">{{ cardItem.value }}</aside>
        </div>
      </div>
    </div>
    <!-- PC端显示table样式 -->
    <a-table v-else :data-source="dataSource" v-bind="$attrs" :columns="currentCol" @resizeColumn="handleResizeColumn">
      <template v-slot:[item]="scope" v-for="item in renderArr">
        <slot
          :name="item"
          :record="scope.record"
          :column="scope.column"
          v-bind="scope || {}"
        ></slot>
      </template>
    </a-table>
    
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  getCurrentInstance,
  onMounted,
  onUnmounted,
  useSlots,
  useAttrs,
} from "vue";

// 工具类函数
import { utilDeepCloneObj, utilIsMobile } from "@utils/common";
import moment from "moment";
const slots = useSlots();
const renderArr = Object.keys(slots);
const props = defineProps({
  pColumns: {
    type: Array,
    default: () => [],
    required: true,
  },
  dataSource: {
    type: Array,
    default: () => [],
    required: true,
  },
});

const currentCol = ref<any>([]);
const mobileShowList = ref<any>([]);
const IS_MOBILE = utilIsMobile();
/* 
    考虑到列的处理可能是多样的 可以使用链式处理方式
*/
const chainListFn = async (initParams: any, fns: Array<Function>) => {
  for (let index = 0; index < fns.length; index++) {
    initParams = await fns[index](initParams);
  }
  return initParams;
};
// 处理列
const handleColumns = async () => {
  const newColumns = utilDeepCloneObj(props.pColumns);

  let res = await chainListFn(newColumns, [
    (list: any) => {
      let R = list.map((item: any) => {
        return {
          ...item,
          resizable: !!item.width,
        };
      });
      return Promise.resolve(R);
    },
  ]);

  currentCol.value = res;
};

const handleMobileRes = (tbData: any) => {
  try {
    const pColumns = props.pColumns;
    // 过滤掉操作
    const newColumns = pColumns.filter((item: any) => item.title != "操作");

    const tempArr: { label: string; value: string }[] = [];
    tbData.forEach((bigTableItem: any) => {
      let arr: any = [];
      newColumns.forEach((smallTableItem: any) => {
        const key = smallTableItem.dataIndex;
        const label = smallTableItem.title;
        let value;
        // 这里可以增加一些特殊值的处理
        if(smallTableItem.T){
          value = moment(bigTableItem[key]).format('YYYY-MM-DD HH:mm:ss');
        }else{
          value = bigTableItem[key];
        }
        arr.push({
          label,
          value,
        });
      });
      tempArr.push(arr);
    });

    mobileShowList.value = [...tempArr];
  } catch (error) {
    console.log("error", error);
  }
};

watch(
  () => props.dataSource,
  (val: any) => {
    console.log("val", val);
    if (val && IS_MOBILE) {
      handleMobileRes(val);
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
onMounted(() => {
  handleColumns();
});
// 处理拖动的宽度
const handleResizeColumn = (w: any, col: { width: any }) => {
  col.width = w;
};
</script>
<style scoped lang="less">
.mobile-list-box {
  .card-box {
    box-shadow: 0 0 11px 1px #ccc;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    .card-item {
      display: flex;
      justify-content: space-between;
      .card-item-label {
        font-weight: bold;
      }
    }
  }
}
</style>
